// 封装数据懒加载的方法
import { ref } from 'vue'
import { useIntersectionObserver } from '@vueuse/core'
export function useLazyData (callback: () => void) {
  // 1.0 得到需要懒加载的组件对象
  const target = ref(null)
  // 2.0 监听组件对象是否出现在了可视区域
  const { stop } = useIntersectionObserver(target, ([{ isIntersecting }]) => {
      if (isIntersecting) {
        // 调用获取数据的方法（新鲜好物 & 人气推荐）
        // 由于这里到底执行什么代码，是由调用来决定，所以我直接从这里执行一个回调函数
        callback()
        // 停止监听
        stop()
      }
    },
    {
      threshold: 0
    }
  )
  return target
}